<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <i class="iconfont icon-chengyuan"></i>
        <span>校园疫情管理系统</span>
      </div>
      <!-- 用户信息区域 -->

      <el-row :gutter="20" style="width: 270px">
        <el-col
          class="info"
          :span="14"
          style="cursor: pointer"
          @click.native="goProfile"
        >
          <img :src="imgUrl" alt="" v-if="userInfo.head" />
          <span>{{ userInfo.username }}</span>
        </el-col>
        <el-col :span="10">
          <el-button type="info" @click="logout"> 退出 </el-button>
        </el-col>
      </el-row>
    </el-header>

    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="240px">
        <div
          v-for="(item, index) in menuList"
          :key="index"
          class="list-item"
          :class="{ active: index == $store.state.studentCurrentIndex }"
          @click="parseModule(index)"
        >
          <i class="iconfont" :class="iconObj[index]"></i>
          <span>{{ item }}</span>
        </div>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getUserDataByToken } from "network/users/getUserDataByToken";
export default {
  name: "Home",
  data() {
    return {
      userInfo: {},
      menuList: ["我的通知", "健康填报", "请假申请", "个人信息"],
      iconObj: [
        "icon-wode-tongzhi",
        "icon-ceshishenqing",
        "icon-ceshishenqing",
        "icon-gerenxinxi",
      ],
      routePath: ["notice", "health", "leave", "profile"],
    };
  },
  computed: {
    imgUrl() {
      return this.baseHttp + this.$store.state.avatarPath;
    },
  },
  async created() {
    this.getUserDataByToken();
  },
  methods: {
    // 获取用户信息
    async getUserDataByToken() {
      let res = await getUserDataByToken(
        window.sessionStorage.getItem("token")
      );
      this.userInfo = res;
      this.$store.state.avatarPath = this.userInfo.head;
    },
    // 退出登录
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    // 切换板块
    parseModule(index) {
      this.$store.commit("setCurrentIndex", {
        type: "studentCurrentIndex",
        index,
      });
      this.$router.push("/student/" + this.routePath[index]);
    },
    // 切换至个人信息页面
    goProfile() {
      this.$router.push("/student/profile");
    },
  },
};
</script>
 
<style lang="less" scoped>
.home-container {
  height: 100%;
  transition: 1s;
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  background-color: #373d41;
  color: #fff;
  font-size: 20px;
  > div {
    i {
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      background: #fff;
      color: #373d41;
      font-size: 25px;
      margin-right: 20px;
    }
  }
  .info {
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
}

.el-aside {
  background-color: #333744;
  overflow: hidden;
  .user {
    display: flex;
    align-items: center;
    width: 100%;
    height: 70px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #fff;
    padding-left: 30px;
    border-radius: 10px;
    img {
      width: 40px;
      width: 40px;
      border-radius: 50%;
      overflow: hidden;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
  .list-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 70px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding-left: 30px;
    &.active {
      background-color: rgba(0, 0, 0, 0.2);
      color: skyblue;
    }
    i {
      font-size: 20px;
      margin-right: 10px;
    }
  }
  .toggle-button {
    background: #4a5064;
    color: white;
    font-size: 10px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
}

.el-main {
  background-color: #eaedf1;
}
</style>>
